<template>
  <div class="content">
    <div class="right">
      <div class="dianzan flex-jac">
        <SvgIcon name="dianzan" width="26px" height="26px" />
      </div>
      <div class="cai flex-jac">
        <SvgIcon name="dianzan" width="26px" height="26px" />
      </div>
      <div class="collect flex-jac">
        <SvgIcon name="shoucangbiaoqian" />
      </div>
      <div class="share flex-jac">
        <SvgIcon name="a-fenxiang2" />
      </div>
    </div>
    <span class="content__title">{{ item.title }}</span>
    <div class="info">
      <span class="username">{{ item.user.nickname }}</span>
      <span class="drop"></span>
      <span class="date">{{ item.createTime }}</span>
      <span class="news-tag">新手上路 请多多包涵</span>
    </div>
    <div class="body-content">
      {{ item.content }}
    </div>
    <!-- <div class="copyright" v-if="type === 'article'">
      <span class="username">日拱一兵</span>
      <span class="copy">原创</span>
    </div> -->
    <div class="tags">
      <el-tag class="tag" type="info" v-for=" item1  in  item.tags " :key="item1.id">{{ item1.tagName }}</el-tag>
    </div>
    <div class="btns flex-ac" v-if="type === 'problem'">
      <button class="btn btn--wran">{{ item.collect ? '已关注' + item.interest : "关注" + item.interest }}</button>
      <button class="btn btn--default">收藏</button>
    </div>
    <div class="content__footer flex-ac" v-if="type === 'problem'">
      <span>回复</span>
      <span class="drop"></span>
      <span>阅读{{ item.readCount }}</span>
    </div>
    <div class="read-count content__footer" v-if="type === 'article'">
      <span>阅读 {{ item.readCount }}</span>
      <span class="date">{{ item.createTime }}</span>
    </div>
    <div class="btn-group flex-jac" v-if="type === 'article'">
      <div class="btn">
        <SvgIcon name="good" />
        <span>赞</span>
      </div>
      <div class="btn">
        <SvgIcon name="shoucangbiaoqian" />
        <span>收藏</span>
      </div>
      <div class="btn">
        <SvgIcon name="a-fenxiang2" />
        <span>分享</span>
      </div>
    </div>
    <div class="copy flex-jac" v-if="type === 'article'">
      <span>本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议</span>
    </div>
  </div>
</template>

<script setup lang="ts" generic="T extends  'problem' | 'article'">
import { ISpecual } from '@/interface/ISpecual';
interface IS {
  type: T,
  item: ISpecual,
}
//article
defineProps<IS>()


</script>

<style lang="scss" scoped>
.content {
  display: flex;
  position: relative;
  padding: 20px 30px;
  flex-direction: column;
  gap: 20px;
  background-color: #fff;
  border-radius: 6px;

  .right {
    position: absolute;
    left: -60px;
    top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    .dianzan,
    .cai {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid $color;
      background-color: #fff;
    }

    .cai {
      transform: rotate(180deg);
    }

    .collect,
    .share {
      width: 30px;
      height: 30px;
      color: #ccc;
      border-radius: 50%;
      background-color: #fff;
    }
  }

  &__title {
    font-size: 36px;
  }

  .info {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 14px;

    .username {
      font-weight: bold;
      color: #129D69;
    }

    .date {
      color: #727B82;
    }

    .news-tag {
      font-size: 12px;
      font-weight: bold;
      padding: 4px 18px;
      border-radius: 40px;
      background-color: #0DCAF0;
    }
  }

  .copyright {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    font-size: 14px;

    .username {
      padding: 0 10px;
      border-right: 1px solid #000;
    }

    .copy {
      color: #000;
    }
  }

  .tags {
    display: flex;
    gap: 10px;

    .tag {
      background-color: #e5f4ef;
      color: #84b691;
    }
  }

  .btns {
    gap: 18px;

    .btn--wran {
      background-color: #00965e;
    }

    .btn--default {
      background-color: #fff;
      color: #000;
      box-shadow: 1px 1px 0 0 rgba($color: #000000, $alpha: .1),
        -1px -1px 0 0 rgba($color: #000000, $alpha: .1);
    }
  }

  &__footer {
    font-size: 14px;
    gap: 8px;
    color: #727B82;
  }
}

.read-count {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: #727B82;
}

.btn-group {
  gap: 16px;

  >.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #767676;
    font-size: 14px;
    background-color: transparent;
    border: 1px solid #eee;

  }
}

.copy {
  color: #727B82;
  font-size: 14px;
  margin-top: 6px;
  margin-bottom: 10px;
}
</style>